<script setup lang="js">
import { onMounted, onUnmounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

let map = null          // 地图实例
let activeMarker = null // 当前唯一标记
let geom = []           // 存储经纬度数组

onMounted(() => {
  /* 1. 加载 JSAPI */
  AMapLoader.load({
    key: '6a15e02eb10d0e069c5e701681273282', // 高德 Web Key
    version: '2.0'
  })
      .then((AMap) => {
        /* 2. 创建地图 */
        map = new AMap.Map('container', {
          viewMode: '2D',
          zoom: 14,
          center: [103.993033, 30.552469]
        })

        /* 3. 监听地图点击：创建 / 移动唯一标记 */
        map.on('click', (e) => {
          const lnglat = e.lnglat // AMap.LngLat 对象
          if (!activeMarker) {
            // —— 第一次点击：新建标记 ——
            activeMarker = new AMap.Marker({
              position: lnglat,
              anchor: 'bottom-center',
              map               // 直接挂到地图
            })

            /* 点击标记 → 删除自身 */
            activeMarker.on('click', (evt) => {
              map.remove(activeMarker)
              activeMarker = null
            })
          } else {
            // —— 后续点击：移动标记 ——
            activeMarker.setPosition(lnglat)
          }

          /* 4. 统一获取当前标记坐标 */
          geom = activeMarker.getPosition().toArray()
          console.info('当前标记经纬度:', geom)
        })
      })
      .catch(console.error)
})

/* 组件卸载：善后清理 */
onUnmounted(() => {
  if (map) {
    if (activeMarker) map.remove(activeMarker)
    map.destroy()
    map = activeMarker = null
  }
})
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>
